<template>
  <div>
<!--    <h3>当前最新的count值为：{{$store.state.count}}</h3>-->
    <h3>当前最新的count值为：{{count}}</h3>
    <h3>{{showNum}}</h3>
    <button @click="btnHandle1">-1</button>
    <button @click="btnHandle2">-N</button>
    <button @click="btnHandle3">-1 async</button>
    <button @click="btnHandle4">-N async</button>
    <hr>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 async</button>
    <button @click="subNAsync(3)">-N async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: 'Subtraction',
  data () {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    btnHandle1 () {
      this.sub()
    },
    btnHandle2 () {
      this.subN(3)
    },
    btnHandle3 () {
      this.subAsync()
    },
    btnHandle4 () {
      this.subNAsync(3)
    }
  }
}
</script>

<style scoped>

</style>
